import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { List, InputItem, Button, Icon } from 'antd-mobile';

import * as chatActions from 'actions/chat';
import { getId } from 'utils/tools';
@withRouter
@connect((state, props) => {
    const { id, type } = props.match.params;
    const linkmanId = type === 'group' ? id : getId(state.login.user.id, id);
    const messages = state.chat.linkmans[linkmanId] || [];
    return {
        user: state.login.user,
        messages,
        linkmans: state.chat.linkmans
    }
}, dispatch => ({
    chatActions: bindActionCreators(chatActions, dispatch)
}))
export default class Chat extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    
    handleSend = () => {
        const { value } = this.state;
        const { id, avatar, desc } = this.props.user;
        
        if (!value) {
            return;
        }
        const from = {
            _id: this.props.user.id,
            name: this.props.user.name,
            avatar: this.props.user.avatar
        }
        const to = {
            _id: this.props.match.params.id,
            name: this.props.location.state.name,
            avatar: this.props.location.state.avatar
        }
        this.props.chatActions.sendMsg({
            content: value,
            from,
            to
        });
        
        this.setState({
            value: ''
        })
    }
    handleChange = value => {
        this.setState({
            value
        })
    }
    render() {
        const { value } = this.state;
        const { user, messages, location } = this.props;
        
        return (          
            <List style={{position: 'absolute', left: 0, width: '100%', bottom: 0}}>
                <InputItem
                    value={value}
                    onChange={this.handleChange}
                    extra={<div>
                        <span onClick={this.handleSend}>发送</span>
                    </div>}
                />
            </List>
        )
    }
}